<template>
  <div>
    <el-card>
      <div class="title">
        <h1><img src="" alt="">加工参数</h1>
        <p>单位：MM、KG</p>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="分条最宽" prop="plateMax">
          <el-input-number v-model="form.plateMax" style="width:100%" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="分条最窄" prop="plateMin">
          <el-input-number v-model="form.plateMin" style="width:100%" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="板料最长" prop="barMax">
          <el-input-number v-model="form.barMax" style="width:100%" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="板料最短" prop="barMin">
          <el-input-number v-model="form.barMin" style="width:100%" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="成品浮动" prop="weightAbout">
          <el-input v-model="form.weightAbout" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="组刀算法" prop="computeType">
          <el-select v-model="form.computeType" placeholder="请选择组刀算法" style="width:100%">
            <el-option label="系统推荐" value="系统推荐"></el-option>
            <el-option label="其他算法" value="其他算法"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="预留边丝" prop="leftWaste">
          <el-input-number v-model="form.leftWaste" style="width:100%" controls-position="right"></el-input-number>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitConfig">更新</el-button>
          <!-- <el-button @click="getParamsConfig">重置</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { paramsConfigApi, paramsConfigUpdateApi } from "@/api/index.js";
export default {
  data () {
    return {
      form: {},
      rules: {
        plateMax: [
          { required: true, message: '分条最宽不能为空', trigger: 'blur' }
        ],
        plateMin: [
          { required: true, message: '分条最窄不能为空', trigger: 'blur' }
        ],
        barMax: [
          { required: true, message: '板料最宽不能为空', trigger: 'blur' }
        ],
        barMin: [
          { required: true, message: '板料最宽不能为空', trigger: 'blur' }
        ],
        weightAbout: [
          { required: true, message: '成品浮动不能为空', trigger: 'blur' }
        ],
        computeType: [
          { required: true, message: '组刀算法不能为空', trigger: 'blur' }
        ],
        leftWaste: [
          { required: true, message: '预留边丝不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getParamsConfig()
  },
  methods: {
    async getParamsConfig () {
      let res = await paramsConfigApi()
      if (res.code == 200) {
        this.form = res.data
        this.$store.commit('SET_COMPANY_CONFIG', res.data)
      }
    },
    submitConfig () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await paramsConfigUpdateApi(JSON.stringify(this.form))
          if (res.code == 200) {
            this.form = res.data
            this.$store.commit('SET_COMPANY_CONFIG', res.data)
            this.$message.success('更新成功')

          }
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 10px;

}

p {
  text-align: rigth;
  color: #ff0000;
  font-size: 24px;
  margin-bottom: 10px;

}

::v-deep .el-input-number .el-input__inner {
  text-align: left !important;
}
</style>
